$unit:2px;
.loading{
  position: relative;
  display: inline-block;
  width: 30*$unit;
  max-width: 100%;
  height: 30*$unit;
  max-height: 100%;
  vertical-align: middle;
  -webkit-animation: rotate 0.8s linear infinite;
  animation: rotate 0.8s linear infinite;
  -webkit-animation-timing-function: steps(12);
  animation-timing-function: steps(12);
  .item{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    &::before {
      display: block;
      width: 2*$unit;
      height: 25%;
      margin: 0 auto;
      background-color: rgb(25, 137, 250);
      border-radius: 40%;
      content: ' ';
    }
  }
}

// .Loop(@index) when(@index=<12){
//   .loading .item:nth-child(@{index}){
      // transform: rotate(30deg * @index);
      // opacity: 1*@index/12;
//   }
//   //递归调用 达到循环目的
//   .Loop(@index+1);
// }

// // 调用循环
// .Loop(0);

// @each $c in  $colors{
//   $i:index( $colors,$c);        // 获取 $c 在数组中的索引，并赋值给 $i 赋值用冒号，不是等号~！ 
//   .dot-#{$i}{                   // 经典的地方来了，SCSS 循环是从 1 开始，不是 0 哦~
//       background: $c;           // 背景色
//   }
// }


@for $i from 1 through 12{
  .loading .item:nth-child(#{$i}){
    transform: rotate(30deg * $i);
    opacity: 1*$i/12;
  }
}



@-webkit-keyframes rotate {
from {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
to {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
}
@keyframes rotate {
from {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
to {
  -webkit-transform: rotate(360deg);
          transform: rotate(360deg);
}
}